import React from 'react';
import CopyBoard from '../../../components/CopyBoard';
import s from './style.module.css';
import Icon from './icon';
import { Link } from 'react-router-dom';
import fetchFer from 'API/fetch';
import notification from '@kuiper-components/notification';
import { Menu, Dropdown } from 'antd';
import Progress from '@knownsec/react-component/dist/Progress';
import EventCount from './EventCount';
import Switch from '@kuiper-components/switch';
import Tooltip from '@kuiper-components/tooltip';
import { ChevronDown16 as ChevronDown } from '@carbon/icons-react';
const taskType = { a: '周期任务', b: '单次任务' };
const checkType = {
	a: { type: '正在检测', color: '#0B6FD6' },
	b: { type: '检测未开始', color: '#CBD1DA' },
	c: { type: '检测停止', color: '#F04038' },
};
const changeSwitch = async (e, id) => {
	const params = {
		asset_task_id: id,
		enable_monitor: e,
	};
	const res = await fetchFer(`/api/v2/jobs/host_vul_task_switch`, {
		method: 'POST',
		body: JSON.stringify(params),
	});
};
export const HostColumns = [
	{
		title: '任务名称',
		key: 'a',
		dataIndex: 'a',
		render(val) {
			return (
				<div title={val}>
					<CopyBoard className={s.affect} text={val} />
				</div>
			);
		},
	},
	{
		title: '监测资产',
		key: 'b',
		dataIndex: 'b',
		render(val) {
			return (
				<div title={val}>
					<CopyBoard className={s.affect} text={val} />
				</div>
			);
		},
	},
	{
		title: '监测开始时间',
		key: 'c',
		dataIndex: 'c',
		render(e) {
			return <span>{taskType[e]}</span>;
		},
	},
	{
		title: '任务类型',
		key: 'c',
		dataIndex: 'c',
		render(e) {
			return <span>{taskType[e]}</span>;
		},
	},
	{
		title: '检测状态',
		key: 'aa',
		dataIndex: 'aa',
		render(e) {
			return (
				<div>
					<span className={s.circle} style={{ background: checkType[e].color }}>
						检测完成
					</span>
					<Progress percent={e} />
				</div>
			);
		},
	},
	{
		title: '最近一次监测结果',
		key: 'cc',
		dataIndex: 'cc',
		render(e) {
			return <EventCount className={s.lh1} category={e} />;
		},
	},
	{
		title: '监测开关',
		key: 'ac',
		dataIndex: 'ac',
		width: 108,
		render(_, record) {
			const enableMonitor = record.enableMonitor;
			const id = record.id;
			return (
				<Switch
					checked={enableMonitor}
					defaultChecked={enableMonitor}
					onChange={checked => {
						changeSwitch(checked, id);
					}}
				/>
			);
		},
	},
	{
		title: '操作',
		key: 'ab',
		dataIndex: 'ab',
		width: 150,
		render(x, record) {
			const id = record.id;

			return (
				<div className={s.controlContainer}>
					<div className={s.control}>
						<Link className={s.item} to={`/task/Detail/host`}>
							监测报告
						</Link>
						<Dropdown
							// visible={true}
							overlay={
								<Menu>
									<Menu.Item key="1">
										{/* <span
											className={s.itemSpan}
											onClick={() => (window.location.href = `/#/createJob`)}
										>to={`/createJob`}
											编辑
										</span> */}

										<Link
											className={s.itemSpan}
											to={{ pathname: '/task/createJob', state: { tid: id } }}
										>
											编辑
										</Link>
									</Menu.Item>
									<Menu.Item key="2">
										<span className={s.itemSpan}>停止</span>
									</Menu.Item>
									<Menu.Item key="3">
										<span
											className={s.itemSpan}
											onClick={e => {
												handleDelete();
											}}
										>
											删除
										</span>
									</Menu.Item>
									{/* TODO:只单次出现 */}
									<Menu.Item key="4">
										<span className={s.itemSpan}>重试</span>
									</Menu.Item>
								</Menu>
							}
							trigger={['click']}
							getPopupContainer={triggerNode => triggerNode.parentElement}
						>
							<a className={s.dropdown} onClick={e => e.preventDefault()}>
								管理
								<ChevronDown />
							</a>
						</Dropdown>
					</div>
				</div>
			);
		},
	},
];
export const WebColumns = [
	{
		title: '任务名称',
		key: 'a',
		dataIndex: 'a',
		render(val) {
			return (
				<div title={val}>
					<CopyBoard className={s.affect} text={val} />
				</div>
			);
		},
	},
	{
		title: '监测资产',
		key: 'b',
		dataIndex: 'b',
		render(val) {
			return (
				<div title={val}>
					<CopyBoard className={s.affect} text={val} />
				</div>
			);
		},
	},
	{
		title: '监测开始时间',
		key: 'c',
		dataIndex: 'c',
		render(e) {
			return <span>{taskType[e]}</span>;
		},
	},
	{
		title: '任务类型',
		key: 'c',
		dataIndex: 'c',
		render(e) {
			return <span>{taskType[e]}</span>;
		},
	},
	{
		title: '检测状态',
		key: 'aa',
		dataIndex: 'aa',
		render(e) {
			return (
				<div>
					<span className={s.circle} style={{ background: checkType[e].color }}>
						检测完成
					</span>
					<Progress percent={e} />
				</div>
			);
		},
	},
	{
		title: '检测状态',
		key: 'aa',
		dataIndex: 'aa',
		render(e) {
			return (
				<div>
					<span
						className={s.circle}
						style={{ background: checkType[e].color }}
					></span>
					<span>{checkType[e].type}</span>
				</div>
			);
		},
	},
	{
		title: '检测状态详情',
		key: 'bb',
		dataIndex: 'bb',
		width: 150,
		render(e) {
			return (
				<a className={s.dropdown} onClick={e => e.preventDefault()}>
					查看详情
				</a>
			);
		},
	},
	{
		title: '最近一次监测结果',
		key: 'cc',
		dataIndex: 'cc',
		render(e) {
			return <EventCount className={s.lh1} category={e} />;
		},
	},
	{
		title: '监测开关',
		key: 'ac',
		dataIndex: 'ac',
		width: 108,
		render(_, record) {
			const enableMonitor = record.enableMonitor;
			const id = record.id;
			return (
				<Switch
					checked={enableMonitor}
					defaultChecked={enableMonitor}
					onChange={checked => {
						changeSwitch(checked, id);
					}}
				/>
			);
		},
	},
	{
		title: '操作',
		key: 'ab',
		dataIndex: 'ab',
		width: 150,
		render(x, record) {
			const id = record.id;

			return (
				<div className={s.controlContainer}>
					<div className={s.control}>
						<Link className={s.item} to={`/task/Detail/host`}>
							监测报告
						</Link>
						<Dropdown
							// visible={true}
							overlay={
								<Menu>
									<Menu.Item key="1">
										<Link
											className={s.itemSpan}
											to={{ pathname: '/task/createJob', state: { tid: id } }}
										>
											编辑
										</Link>
									</Menu.Item>
									<Menu.Item key="2">
										<span className={s.itemSpan}>停止</span>
									</Menu.Item>
									<Menu.Item key="3">
										<span
											className={s.itemSpan}
											onClick={e => {
												handleDelete();
											}}
										>
											删除
										</span>
									</Menu.Item>
									{/* TODO:只单次出现 */}
									<Menu.Item key="4">
										<span className={s.itemSpan}>重试</span>
									</Menu.Item>
								</Menu>
							}
							trigger={['click']}
							getPopupContainer={triggerNode => triggerNode.parentElement}
						>
							<a className={s.dropdown} onClick={e => e.preventDefault()}>
								管理
								<ChevronDown />
							</a>
						</Dropdown>
					</div>
				</div>
			);
		},
	},
];
